import React, { useState } from 'react'
import { Link,Outlet,useNavigate } from 'react-router-dom'

export default function Message() {
  const navigate = useNavigate()
  const [message] = useState([
    { id: '001', title: '消息1', content: '锄禾日当午' },
    { id: '002', title: '消息2', content: '汗滴禾下土' },
    { id: '003', title: '消息3', content: '谁知盘中餐' },
    { id: '004', title: '消息4', content: '粒粒皆辛苦' },
  ])
  function showDetail(id,title,content){
    navigate(`detail?id=${id}&title=${title}&content=${content}`)
  }
  return (
    <div>
      <ul>
        {
          message.map((m) => {
            return (<li key={m.id}>
                      <Link to={`detail?id=${m.id}&title=${m.title}&content=${m.content}`}>{m.title}</Link>&nbsp;&nbsp;
                      <button onClick={()=>showDetail(m.id,m.title,m.content)}>查看详情</button>
                   </li>)
          })
        }
      </ul>
      <hr />
      <Outlet/>
    </div>
  )
}
